<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			<Avatar :src='src' :width='100' fit='fill'></Avatar>
            <a href="/goodsshow">商品列表</a>
		</div>
		<hr>
        <center>
            <div>
                <table>
                    <tr>
                        <th>ID</th>
                        <th>商品名称</th>
                        <th>商品描述</th>
                        <th>商品图片</th>
                        <th>商品规格</th>
                        <th>演示视频</th>
                        <th>商品价格</th>
                    </tr>
                    <tr v-for="item,index in goods_list">
                        <td @change="get_tags">{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.desc }}</td>
                        <td><img :src="'http://localhost:8000/static/upload/' + item.img" alt="" width=100px></td>
                        <td>{{ tags_list[index] }}</td>
                        <td><video :src="'http://localhost:8000/static/upload/' + item.video" width=100px></video></td>
                        <td>{{ item.price }}</td>
                    </tr>
                    
                    <br />
                    <div>
                        <Pagination v-model="pagination" @change="change"></Pagination>
                    </div>
                </table>
            </div>

        </center>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';

// 导入滑块验证码
import dragVerify from 'vue-drag-verify'



export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '商品展示', route:{name: 'goodslist'}},
		],
        src:'',
        // 商品数据
        goods_list: '',
        // 页码
        pagination: {
            page:1,
            size:4,
            total:0
        },
        // 商品id
        tags_list: []

    }
  },
  mounted:function(){
      this.get_goods_list()

  },
  methods:{
      get_goods_list(){
          this.axios.get('http://127.0.0.1:8000/goodslist/').then((result)=>{
                this.goods_list = result.data.results;
                
                this.pagination.total = result.data.count
                
                for(let i=0;i<this.goods_list.length;i++){
                    let gid = this.goods_list[i].id
                    this.axios.get('http://127.0.0.1:8000/gettags/',{params: {
                        "gid":gid
                    }}).then((result)=>{
                        console.log(result.data)
                        this.tags_list.push(result.data.tags)
                    })

                }
                console.log(this.tags_list)

			})
      },
      
	  change(){
			this.axios.get('http://127.0.0.1:8000/goodslist/',{params:{'page':this.pagination.page,'size': this.pagination.size}}).then((result)=>{
				
				console.log(result.data)
                this.goods_list = result.data.results
                
                
                for(let i=0;i<this.goods_list.length;i++){
                    let gid = this.goods_list[i].id
                    this.axios.get('http://127.0.0.1:8000/gettags/',{params: {
                        "gid":gid
                    }}).then((result)=>{
                        console.log(result.data)
                        this.tags_list.push(result.data.tags)
                    })

                }

			})

      },
      get_tags(e){
        //   console.log(e.target)
        console.log(1)
      }
		
        
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
  }
}


</script>
 
<style>
    tr,th,td{
        border: 1px solid black;
        text-align: center
    }
    th{
        width: 100px;
        height: 40px;
    }
</style>